<template>
    <BaseParam :label="label" :help="help">
        <el-select
            v-model="selectedValue"
            :placeholder="config?.placeholder || '请选择'"
            :multiple="config?.multiple"
            :clearable="config?.clearable"
            @change="handleChange"
        >
            <el-option
                v-for="option in config?.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            />
        </el-select>
    </BaseParam>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { BaseParam } from './index';

interface SelectOption {
    label: string;
    value: any;
}

const props = defineProps<{
    modelValue?: any;
    label: string;
    help?: string;
    config?: {
        placeholder?: string;
        multiple?: boolean;
        clearable?: boolean;
        options: SelectOption[];
    };
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
}>();

const selectedValue = ref(props.modelValue);

watch(() => props.modelValue, (newValue) => {
    selectedValue.value = newValue;
});

const handleChange = (value: any) => {
    emit('update:modelValue', value);
};
</script> 